<template>
  <el-container style="height:100vh">
    <el-header style="background-color: black;color: white;">
      <div style="padding-top: 15px;">
        <span style="font-size: 28px;font-family: '华文彩云';">博客管理系统</span>
        <span style="float: right">欢迎 WELCOME</span>

      </div>
    </el-header>
    <el-container>
      <el-aside style="width: 220px;background-color: #f2f2f2;">
        <el-scrollbar>
          <el-row>
            <el-col id="photoPanel">
              <img src="/admin.jpg" style="width: 50%;border-radius: 100%;"/>
              <div><span id="online">●</span><span> {{yhm}}</span></div>
              <el-button type="text" style="float: right" @click="zxdx">注销</el-button>

              <el-divider/>
            </el-col>
          </el-row>
          <el-menu default-active="/admin/user" :router="true" background-color="#f2f2f2">
            <el-sub-menu index="1">
              <template #title>
                <el-icon><Avatar/></el-icon>
                用户管理
              </template>
              <el-menu-item index="/admin/user">
                <el-icon><User/></el-icon>
                用户维护
              </el-menu-item>
              <el-menu-item index="/admin/yhfx">
                <el-icon><Histogram/></el-icon>
                数据统计分析
              </el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="2">
              <template #title>帖子管理</template>
              <el-menu-item index="/admin/post"><el-icon><Reading /></el-icon>帖子管理</el-menu-item>
              <el-menu-item index="/admin/postfx">
                <el-icon><Histogram/></el-icon>
                数据统计分析
              </el-menu-item>
            </el-sub-menu>


            <el-sub-menu index="3">
              <template #title>系统设置</template>
              <el-menu-item index="/config">
                <el-icon><Setting/></el-icon>
                系统设置
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-scrollbar>
      </el-aside>
      <el-main>
        <!-- 路由显示区 -->
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>
<script setup lang="ts">
import {nextTick, onMounted, ref} from 'vue';
import axios from 'axios';
import DetailFenPage from "./DetailFenPage.vue";
import DetailFollowerPage from './DetailFollowerPage.vue';
import MyPost from '../components/MyPost.vue';
import UpdateUserPage from './UpdateUserPage.vue'
// 登录状态管理
import {useUserStore} from '@/stores/user'
import {useRouter} from 'vue-router'
const router = useRouter()

const userStore = useUserStore()
const yhm = ref(userStore.glyyhm);
const zxdx=()=>{
  userStore.clearGlyUserName();
  userStore.clearGlyUserId();
  router.push('/login');

}
</script>
<style scoped>

#photoPanel {
  padding-top: 10px;
  text-align: center;
}

#photoPanel #online {
  font-size: 20px;
  color: #5CB85C;
}
</style>
<script setup>
</script>
